<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>生产计划管理</el-breadcrumb-item>
      <el-breadcrumb-item>计划工单下达</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card>
      <div class="seaForm">
        <div class="seaTitle"><span>检索条件</span></div>
        <div class="seaInput">
          <el-form ref="form" label-width="120px">
            <el-form-item label="所属站点">
              <el-input disabled v-model="orderForm.site" placeholder="请选择所属站点"></el-input>
            </el-form-item>
            <el-form-item label="工单编号">
              <el-input v-model="orderForm.workorderNo" placeholder="请选择工单编号">
                <template #suffix>
                  <i
                    class="el-input__icon el-icon-search"
                    @click="addunfinished"
                  ></i>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="infoForm">
        <div class="infoTitle"><span>工单信息</span></div>
        <div class="infoInput">
          <el-form ref="infoform" label-width="120px">
            <el-form-item label="工单数量">
              <el-input v-model="orderForm.shoporder_numbers" placeholder="请输入工单数量"></el-input>
            </el-form-item>
            <el-form-item label="物料">
              <el-input v-model="orderForm.shoporder_item" placeholder="请输入物料"></el-input>
            </el-form-item>
            <el-form-item label="工艺路线">
              <el-input v-model="orderForm.process_route" placeholder="请输入工艺路线"></el-input>
            </el-form-item>
            <el-form-item label="计划开始时间">
              <el-input v-model="orderForm.shoporder_start_date" placeholder="请输入计划开始时间"></el-input>
            </el-form-item>
            <el-form-item label="计划结束时间">
              <el-input v-model="orderForm.shoporder_end_date" placeholder="请输入计划结束时间"></el-input>
            </el-form-item>
            <el-form-item label="是否可用">
              <el-select v-model="orderForm.shoporder_status" placeholder="请选择是否可用">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="车间">
              <el-input v-model="orderForm.workcenter" placeholder="请选择车间">
                <template #suffix>
                  <i
                    class="el-input__icon el-icon-search"
                    @click="addworkcenter"
                  ></i>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="产线">
              <el-input v-model="orderForm.workline" placeholder="请选择产线">
                <template #suffix>
                  <i
                    class="el-input__icon el-icon-search"
                    @click="addworkline"
                  ></i>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="下达数量">
              <el-input v-model="orderForm.shoporder_numbers" placeholder="请输入下达数量"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="btn">
        <el-button type="success" @click="order">工单下达</el-button>
      </div>
    </el-card>
    <!-- 工单编号二级对话框 -->
      <el-dialog
        title="未完成工单列表"
        v-model="unfinishedDV"
        width="70%"
        append-to-body
      >
        <!-- 对话框内容 -->
        <el-table
          stripe
          border
          ref="multipleTable"
          :data="unfinishedList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          size="small"
        >
          <el-table-column prop="id" label="id" width="50" align="center">
          </el-table-column>
          <el-table-column
            prop="shoporder_no"
            label="工单编号"
            width="120"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="shoporder_numbers"
            label="订单数量"
            width="100"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="shoporder_item"
            label="物料编号"
            width="120"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="process_route"
            label="工艺路线"
            width="120"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="shoporder_status"
            label="工单状态"
            width="100"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="shoporder_start_date"
            label="订阅开始时间"
            width="120"
            align="center"
            show-overflow-tooltip
          >
          <template #default="scope">
            {{ formatDate(scope.row.shoporder_start_date) }}
          </template>
          </el-table-column>
          <el-table-column
            prop="shoporder_end_date"
            label="订阅完成时间"
            width="120"
            align="center"
            show-overflow-tooltip
          >
          <template #default="scope">
            {{ formatDate(scope.row.shoporder_end_date) }}
          </template>
          </el-table-column>
          <el-table-column
            prop="site"
            label="挂靠站点"
            width="120"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="by_user"
            label="创建人"
            width="120"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="create_time"
            label="创建时间"
            width="120"
            align="center"
            show-overflow-tooltip
          >
          <template #default="scope">
            {{ formatDate(scope.row.create_time) }}
          </template>
          </el-table-column>
          <el-table-column label="操作" width="95" align="center">
            <template #default="scope">
              <el-button size="mini" @click="addUnfinished(scope.row)"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNow"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="rowCount"
        >
        </el-pagination>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="unfinishedDV = false">取 消</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 二级对话框结束 -->
      <!-- 车间二级对话框 -->
      <el-dialog
        title="工作中心列表"
        v-model="workcenterDV"
        width="70%"
        append-to-body
      >
        <!-- 对话框内容 -->
        <el-table
          stripe
          border
          ref="multipleTable"
          :data="workcenterList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          size="small"
        >
          <el-table-column prop="id" label="id" width="100" align="center">
          </el-table-column>
          <el-table-column
            prop="workcenter_no"
            label="工作中心"
            width="300"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="workcenter_name"
            label="工作中心名称"
            width="260"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="workcenter_class"
            label="工作中心类型"
            width="260"
            align="center"
            show-overflow-tooltip
          >
          <template #default="scope">
            <span v-if="scope.row.workcenter_class == 'workshop'">车间</span>
            <span v-else-if="scope.row.workcenter_class == 'production_line'">产线</span>
            <span v-else>工位</span>
          </template>
          </el-table-column>
          <el-table-column
            prop="workcenter_description"
            label="工作中心描述"
            width="260"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template #default="scope">
              <el-button size="mini" @click="addWorkcenter(scope.row)"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNow"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="rowCount"
        >
        </el-pagination>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="workcenterDV = false">取 消</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 二级对话框结束 -->
      <!-- 产线二级对话框 -->
      <el-dialog
        title="工作中心列表"
        v-model="worklineDV"
        width="70%"
        append-to-body
      >
        <!-- 对话框内容 -->
        <el-table
          stripe
          border
          ref="multipleTable"
          :data="worklineList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          size="small"
        >
          <el-table-column prop="id" label="id" width="100" align="center">
          </el-table-column>
          <el-table-column
            prop="workcenter_no"
            label="工作中心"
            width="300"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="workcenter_name"
            label="工作中心名称"
            width="260"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="workcenter_class"
            label="工作中心类型"
            width="260"
            align="center"
            show-overflow-tooltip
          >
          <template #default="scope">
            <span v-if="scope.row.workcenter_class == 'workshop'">车间</span>
            <span v-else-if="scope.row.workcenter_class == 'production_line'">产线</span>
            <span v-else>工位</span>
          </template>
          </el-table-column>
          <el-table-column
            prop="workcenter_description"
            label="工作中心描述"
            width="260"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template #default="scope">
              <el-button size="mini" @click="addWorkline(scope.row)"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNow"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="rowCount"
        >
        </el-pagination>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="worklineDV = false">取 消</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 二级对话框结束 -->
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
        orderForm:{
            id:'',
            site:'*',
            workorderNo:'',
            shoporder_numbers:'',
            shoporder_item:'',
            process_route:'',
            shoporder_start_date:'',
            shoporder_end_date:'',
            shoporder_status:'',
            workcenter:'',
            workline:'',
        },
      options: [
        {
          value: "1",
          label: "是",
        },
        {
          value: "2",
          label: "否",
        },
      ],
      unfinishedDV:false,
      unfinishedList:[],
      workcenterDV:false,
      workcenterList:[],
      worklineDV:false,
      worklineList:[],
    };
  },
  methods:{
      order(){
          this.$axios({
            headers: {
              "Content-Type":
                "application/x-www-form-urlencoded; charset=UTF-8",
            },
            method: "post",
            url: "/IE_MES/plan/shoporderIssued.shtml",
            data: this.$qs.stringify({
              "shopOrderFormMap.id":this.orderForm.id,
              "shopOrderFormMap.site":this.orderForm.site,
              "shopOrderFormMap.workorderNo":this.orderForm.workorderNo,
              "shopOrderFormMap.shoporder_numbers":this.orderForm.shoporder_numbers,
              "shopOrderFormMap.shoporder_item":this.orderForm.shoporder_item,
              "shopOrderFormMap.process_route":this.orderForm.process_route,
              "shopOrderFormMap.shoporder_start_date":this.orderForm.shoporder_start_date,
              "shopOrderFormMap.shoporder_end_date":this.orderForm.shoporder_end_date,
              "shopOrderFormMap.shoporder_status":this.orderForm.shoporder_status,
              "shopOrderFormMap.workcenter":this.orderForm.workcenter,
              "shopOrderFormMap.workline":this.orderForm.workline,
              "shopOrderFormMap.shoporder_numbers":this.orderForm.shoporder_numbers,
            }),
      }).then((res) => {
            if ( JSON.parse(res.data).status == true) {
              this.orderForm = []
              this.$message({
                type: "success",
                message: "添加成功!",
              });
            }
            else {
              this.$message({
                type:"warning",
                message:"添加失败!"
              })
            }
          });
      },
      addunfinished(){
        this.unfinishedDV = true;
      this.$axios({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
        method: "post",
        url: "/IE_MES/product_plan/unfinished_workcenter_findByPage.shtml",
        data: this.$qs.stringify({
          pageSize: this.pageSize,
          pageNow: this.pageNow,
        }),
      }).then((res) => {
        console.log(res.data);
        this.unfinishedList = res.data.records;
        this.pageCount = res.data.pageCount;
        this.pageNow = res.data.pageNow;
        this.pageSize = res.data.pageSize;
        this.rowCount = res.data.rowCount;
      });
      },
      addUnfinished(row) {
      this.orderForm.workorderNo = row.shoporder_no;
      this.orderForm.id = row.id;
      this.orderForm.shoporder_numbers = row.shoporder_numbers;
      this.orderForm.shoporder_item = row.shoporder_item;
      this.orderForm.process_route = row.process_route;
      this.orderForm.shoporder_start_date = this.formatDate(row.shoporder_start_date) ;
      this.orderForm.shoporder_end_date = this.formatDate(row.shoporder_end_date) ;
      this.orderForm.shoporder_status = row.shoporder_status;
      this.unfinishedDV = false;
    },
    addworkcenter(){
      this.workcenterDV = true;
       this.$axios({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
        method: "post",
        url: "/IE_MES/workshop/workcenter_workShop_findByPage.shtml",
        data: this.$qs.stringify({
          pageSize: this.pageSize,
          pageNow: this.pageNow,
        }),
      }).then((res) => {
        console.log(res.data);
        this.workcenterList = res.data.records;
        this.pageCount = res.data.pageCount;
        this.pageNow = res.data.pageNow;
        this.pageSize = res.data.pageSize;
        this.rowCount = res.data.rowCount;
      });
    },
    addWorkcenter(row){
      this.orderForm.workcenter = row.workcenter_no;
      this.workcenterDV = false;
    },
    addworkline(){
      this.worklineDV = true;
      this.$axios({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
        method: "post",
        url: "IE_MES/workshop/workcenter_child_findByPage.shtml?workcenter="+this.orderForm.workcenter,
        data: this.$qs.stringify({
          pageSize: this.pageSize,
          pageNow: this.pageNow,
        }),
      }).then((res) => {
        console.log(res.data);
        this.worklineList = res.data.records;
        this.pageCount = res.data.pageCount;
        this.pageNow = res.data.pageNow;
        this.pageSize = res.data.pageSize;
        this.rowCount = res.data.rowCount;
      });
    },
    addWorkline(row) {
      this.orderForm.workline = row.workcenter_no;
      this.worklineDV = false;
    },
    formatDate(data) {
      var date = new Date(data);
      var YY = date.getFullYear() + "-";
      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hh =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var mm =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var ss =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return YY + MM + DD + " " + hh + mm + ss;
    }, 
  }
};
</script>

<style lang="less" scoped>
.seaForm {
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .seaTitle {
    width: 100%;
    height: 38px;
    background-color: #e2e2e2;
    line-height: 38px;
    font-size: 20px;
    border-radius: 5px 5px 0px 0px;
    margin-bottom: 10px;
    span {
      margin-left: 15px;
    }
  }
  .seaInput {
    width: 80%;
    margin: 0 auto;
    .el-form-item {
      height: 60px;
      font-size: 20px;
      /deep/.el-form-item__label {
        height: 50px;
        font-size: 18px;
        line-height: 50px;
      }
      .el-input /deep/ .el-input__inner {
        height: 50px;
      }
    }
  }
}
.infoForm {
  width: 100%;
  border-radius: 5px;
  margin-top: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .infoTitle {
    width: 100%;
    height: 38px;
    background-color: #e2e2e2;
    line-height: 38px;
    font-size: 20px;
    border-radius: 5px 5px 0px 0px;
    margin-bottom: 10px;
    span {
      margin-left: 15px;
    }
  }
  .infoInput {
    width: 80%;
    margin: 0 auto;
    .el-form-item {
      height: 60px;
      font-size: 20px;
      /deep/.el-form-item__label {
        height: 50px;
        font-size: 18px;
        line-height: 50px;
      }
      .el-input /deep/ .el-input__inner {
        height: 50px;
      }
      .el-select {
        width: 100%;
        /deep/ .el-input__inner {
          height: 50px;
        }
      }
    }
  }
}
.btn {
  width: 100%;
  height: 50px;
  position: relative;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .el-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
  }
}
</style>